import { Col, Row, Form, Button } from '@douyinfe/semi-ui';
import { useEffect, useMemo } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';

const {
  Section,
  Input,
  InputNumber,
  AutoComplete,
  Select,
  TreeSelect,
  Cascader,
  DatePicker,
  TimePicker,
  TextArea,
  CheckboxGroup,
  Checkbox,
  RadioGroup,
  Radio,
  Slider,
  Rating,
  Switch,
  TagInput,
} = Form;
const message = '该项为必填项';

const RoleEdit = ({
  entity,
  persistEntity,
  formApiRef,
}: {
  entity?: any;
  persistEntity?: (entity: any) => void;
  formApiRef?: (value: any) => void;
}) => {
  const dispatch = useDispatch<any>();
  const navigate = useNavigate();

  const initialValue = useMemo(() => {
    let tempValues = { ...entity };
    if (!tempValues?.id) {
      tempValues.status = 0;
    }
    return tempValues;
  }, [entity]);

  return (
    <Form
      getFormApi={(api: any) => formApiRef && formApiRef(api)}
      validateFields={() => ''}
      labelPosition='left'
      labelAlign='right'
      labelWidth={'120px'}
      // onChange={(e) => {}}
      onSubmit={(values: any) => {
        persistEntity && persistEntity(values);
      }}
      initValues={initialValue}
      // onReset={() => applyFilter(initialFilter)}
    >
      <div className='grid grid-cols-1 gap-1 w-full'>
        <Input
          field='name'
          label='角色名称'
          trigger='blur'
          rules={[{ required: true, message }]}
        />
        <Input
          field='code'
          label='角色编码'
          trigger='blur'
          rules={[{ required: true, message }]}
        />
        <InputNumber
          field='sort'
          label='显示顺序'
          rules={[{ required: true, message }]}
        />
        <RadioGroup
          field='status'
          label='状态'
          rules={[{ type: 'number' }, { required: true, message }]}
        >
          <Radio value={0}>开启</Radio>
          <Radio value={1}>关闭</Radio>
        </RadioGroup>
        <TextArea
          style={{ height: 120 }}
          field='remark'
          label='备注'
          placeholder='请输入备注'
          maxCount={50}
          showClear
        />
      </div>
      <div className='w-full flex justify-end items-center py-4 '>
        <Button onClick={() => navigate(-1)}>取消</Button>
        <Button theme='solid' htmlType='submit' className='mx-2'>
          保存
        </Button>
      </div>
    </Form>
  );
};

export default RoleEdit;
